<ul [class]="cssClass" [ngClass]="{'page-sidebar-menu-closed':appServ.sidebarClosed&&isRoot}">
    <li class="nav-item" *ngFor="let item of menuData" [ngClass]="{'open':item.opend,'active':item.active}">
        <a href="javascript:;" class="nav-link nav-toggle" (click)="item.opend=!item.opend" *ngIf="!item.Path">
            <i [class]="item.IconClass" *ngIf="item.IconClass"></i>
            <span class="title">{{item.PowerName}}</span>
            <span class="selected" *ngIf="item.active"></span>
            <span class="arrow" *ngIf="item.children&&item.children.length>0" [ngClass]="{'open':item.opend}"></span>
        </a>
        <a [routerLink]="[item.Path]" class="nav-link" *ngIf="item.Path">
            <i [class]="item.IconClass" *ngIf="item.IconClass"></i>
            <span class="selected" *ngIf="item.active"></span>
            <span class="title">{{item.PowerName}}</span>
        </a>
        <side-menus (myHeight)="childrenHeightChange($event)" *ngIf="item.children&&item.children.length>0" [isOpen]="item.opend" [isRoot]="false" [menuData]="item.children"></side-menus>
    </li>
</ul>